<!DOCTYPE html>
<html lang="zh" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>用户列表 - 后台管理系统</title>
  <link rel="icon" href="images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <script src="js/head.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/login/login.js"></script>
  <script src="js/http.js"></script>
</head>

<body>
<div class="lyear-layout-web" id="vue">

  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">

      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">

        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <script src="js/leftNav.js"></script>
          </ul>
        </nav>
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank"
                                                         href="http://lyear.itshubao.com">IT书包</a> All rights
            reserved.</p>
        </div>
      </div>

    </aside>
    <!--End 左侧导航-->

    <!--页面主要内容-->
    <main class="lyear-layout-content">

      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                <form class="pull-right search-bar" method="get" action="#!" role="form">
                  <div class="input-group">
                    <div class="input-group-btn">
                      <input type="hidden" name="search_field" id="search-field" value="title">
                      <button class="btn btn-default dropdown-toggle" id="search-btn"
                              type="button" aria-haspopup="true" aria-expanded="false" @click="changePageOrderList(1)">
                        搜索
                      </button>
                    </div>
                    <input type="text" class="form-control" value="" name="keyword" v-model="inputText"
                           placeholder="请输入类别名称">
                  </div>
                </form>
<!--                <div class="toolbar-btn-action">-->
<!--                  &lt;!&ndash;                                    <a class="btn btn-primary m-r-5" data-toggle="modal" data-target="#detailModal"><i class="mdi mdi-plus"></i> 新增</a>&ndash;&gt;-->
<!--                  <a class="btn btn-danger deleteSelect" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>-->
<!--                </div>-->
              </div>
              <div class="card-body">

                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                    <tr>
                      <th>
                        <label class="lyear-checkbox checkbox-primary">
                          <input type="checkbox" id="check-all"><span></span>
                        </label>
                      </th>
                      <th>订单号</th>
                      <th>用户ID</th>
                      <th>课程名</th>
                      <th>合计</th>
                      <th>下单时间</th>
                      <th>是否付款</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="order in orderList">
                      <td>
                        <label class="lyear-checkbox checkbox-primary">
                          <input type="checkbox" name="ids[]" :value="order.id"><span></span>
                        </label>
                      </td>
                      <td>{{order.orderCode}}</td>
                      <td>{{order.userId}}</td>
                      <td><span v-if="order.course === null">特价课程</span>
                        <span v-else>{{order.course.title}}</span>
                      </td>
                      <td>{{order.money}}</td>
                      <td>{{order.createTime}}</td>
                      <td><span class="label label-danger" v-if="order.payment===0">是</span>
                        <span class="label label-danger" v-else>否</span>
                      </td>
                        <!--                      <td>-->
                        <!--                        <div class="btn-group">-->
                        <!--                                                    <button class="btn btn-xs btn-default" title="编辑"-->
                        <!--                                                            data-toggle="modal" data-target="#editModal"-->
                        <!--                                                            @click="selectArticleList(article.id)"><i-->
                        <!--                                                            class="mdi mdi-pencil"></i></button>-->
                        <!--                          <button class="btn btn-xs btn-default" title="删除"-->
                        <!--                                  data-toggle="modal" data-target="#warninggModal"-->
                        <!--                                  @click="selectArticleList(article.id)">-->
                        <!--                            <i class="mdi mdi-window-close"></i></button>-->
                        <!--                        </div>-->
                        <!--详情模态框start-->
                        <!--                                                <div class="modal fade" id="detailModal" tabindex="-1" role="dialog"-->
                        <!--                                                     aria-labelledby="myModalLabel">-->
                        <!--                                                    <div class="modal-dialog" role="document">-->
                        <!--                                                        <div class="modal-content">-->
                        <!--                                                            <div class="modal-header">-->
                        <!--                                                                <button type="button" class="close add-close" data-dismiss="modal"-->
                        <!--                                                                        aria-label="Close"><span aria-hidden="true">&times;</span>-->
                        <!--                                                                </button>-->
                        <!--                                                                <h4 class="modal-title" id="myModalLabel">增加类别</h4>-->
                        <!--                                                            </div>-->
                        <!--                                                            <div class="modal-body">-->
                        <!--                                                                <div>-->
                        <!--                                                                    <label class="control-label">类别名称：</label>-->
                        <!--                                                                    <input type="text" class="form-control" v-model="submitTypename">-->
                        <!--                                                                </div>-->
                        <!--                                                            </div>-->
                        <!--                                                            <div class="modal-footer">-->
                        <!--                                                                <button type="button" class="btn btn-primary"-->
                        <!--                                                                        @click="addArticle">确定-->
                        <!--                                                                </button>-->
                        <!--                                                            </div>-->
                        <!--                                                        </div>-->
                        <!--                                                    </div>-->
                        <!--                                                </div>-->
                        <!--模态框end-->
                        <!--警告模态框start-->
                        <!--                        <div class="modal fade bs-example-modal-sm" id="warninggModal"-->
                        <!--                             tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">-->
                        <!--                          <div class="modal-dialog modal-sm" role="document">-->
                        <!--                            <div class="modal-content">-->
                        <!--                              <div class="modal-header">-->
                        <!--                                <button type="button" class="close" data-dismiss="modal"-->
                        <!--                                        aria-label="Close"><span-->
                        <!--                                        aria-hidden="true">×</span></button>-->
                        <!--                                <h4 class="modal-title text-danger"-->
                        <!--                                    id="myLargeModalLabel">警告！！！</h4>-->
                        <!--                              </div>-->
                        <!--                              <div class="modal-body">-->
                        <!--                                删除用户信息后无法修复！确定要删除嘛？-->
                        <!--                              </div>-->
                        <!--                              <div class="modal-footer">-->
                        <!--                                <button type="button" class="btn btn-default"-->
                        <!--                                        data-dismiss="modal">我怂了-->
                        <!--                                </button>-->
                        <!--                                <button type="button" class="btn btn-primary"-->
                        <!--                                        data-dismiss="modal"-->
                        <!--                                        @click="deleteArticleList(getOrder.id)">确定-->
                        <!--                                </button>-->
                        <!--                              </div>-->
                        <!--                            </div>-->
                        <!--                          </div>-->
                        <!--                        </div>-->
                        <!-- 警告模态框end-->
                        <!--编辑信息模态框start-->
                        <!--                                                <div class="modal fade" id="editModal" tabindex="-1" role="dialog"-->
                        <!--                                                     aria-labelledby="exampleModalLabel">-->
                        <!--                                                    <div class="modal-dialog" role="document">-->
                        <!--                                                        <div class="modal-content">-->
                        <!--                                                            <div class="modal-header">-->
                        <!--                                                                <button type="button" class="close edit-close" data-dismiss="modal"-->
                        <!--                                                                        aria-label="Close"><span aria-hidden="true" >&times;</span>-->
                        <!--                                                                </button>-->
                        <!--                                                                <h4 class="modal-title" id="exampleModalLabel">编辑信息</h4>-->
                        <!--                                                            </div>-->
                        <!--                                                            <div class="modal-body">-->
                        <!--                                                                <div>-->
                        <!--                                                                    <label class="control-label">修改用户名：</label>-->
                        <!--                                                                    <input type="text" class="form-control"-->
                        <!--                                                                           v-model="getOrder.name">-->
                        <!--                                                                </div>-->

                        <!--                                                            </div>-->
                        <!--                                                            <div class="modal-footer">-->
                        <!--                                                                <button type="button" class="btn btn-primary"-->
                        <!--                                                                        @click="updateArticleList()">保存信息-->
                        <!--                                                                </button>-->
                        <!--                                                            </div>-->
                        <!--                                                        </div>-->
                        <!--                                                    </div>-->
                        <!--                                                </div>-->
                        <!--编辑信息模态框end-->
                        <!--                      </td>-->
                    </tr>
                    </tbody>
                  </table>
                </div>

                <ul class="pagination">
                  <li class="prev"><a href="#!">«</a></li>
                  <li @click="changePageOrderList(1)" class="pageNumber active" data-value="1"><a href="#">1</a></li>
                  <li v-for="page in pages"  @click="changePageOrderList(page)" class="pageNumber" :data-value="page"><a href="#">{{page}}</a></li>
                  <li class="next"><a href="#!">»</a></li>
                </ul>
              </div>
            </div>
          </div>

        </div>

      </div>

    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('.deleteSelect').on("click",function(){
      let ids = [];
      $("tbody input[type='checkbox']").each(function(){
        if($(this).is(':checked')){
          ids.push($(this).val());
        };
      });
      console.log(ids);
      $.ajax({
        type: "POST",
        url: baseUrl+"education_admin/order/deleteSelect",
        data: {
          ids: ids
        },
        success: function (resp) {
          let result = resp;
          alert(result.message);
          vm.showOrderList();
        }
      })
    });

    $(document).on("click",".next",function(){
      $(".active").next(".pageNumber").addClass("active").siblings().removeClass("active");
      let page = $(".pagination").children(".active").attr("data-value");
      vm.changePageOrderList(page);
    });

    $(document).on("click",".prev",function(){
      $(".active").prev(".pageNumber").addClass("active").siblings().removeClass("active");
      let page = $(".pagination").children(".active").attr("data-value");
      vm.changePageOrderList(page);
    });

    $(document).on("click",".pageNumber",function(){
      $(this).addClass("active");
      $(this).siblings().removeClass("active")
    });
  });

  let vm = new Vue({
    el: '#vue',
    data: {
      orderList: [],
      inputText:"",
      submitTypename:"",
      getOrder:{},
      inputText:"",
      pages:[],
      currentPage:1
    },
    methods: {
      // selectArticleList: function (articleId) {
      //   $.ajax({
      //     type: "POST",
      //     url: baseUrl+"education_admin/article/findById",
      //     data: {
      //       id: articleId
      //     },
      //     success: function (resp) {
      //       let result = resp;
      //       vm.getOrder = result.data;
      //     }
      //   })
      // },
      // deleteArticleList: function (articleId) {
      //
      //   $.ajax({
      //     type: "POST",
      //     url: baseUrl+"education_admin/article/deleteById",
      //     data: {
      //       id: articleId
      //     },
      //     success: function (resp) {
      //       let result = resp;
      //       alert(result.message);
      //       if(vm.articleList.length == 1){
      //         vm.currentPage = vm.currentPage-1;
      //         $(".pageNumber").each(function (){
      //           if(vm.currentPage == $(this).attr("data-value")){
      //             $(this).addClass("active").siblings().removeClass("active")
      //           }
      //         });
      //       }
      //       vm.showArticleList();
      //     }
      //   })
      // },
      fuzzyQueryOrderListList:function () {
        let thisObject = this;
        console.log(thisObject.inputText);
        console.log(thisObject.currentPage);
        $.ajax({
          type: "GET",
          url: baseUrl+"education_admin/order/getOrder",
          data: {
            orderCode: thisObject.inputText,
            page: thisObject.currentPage
          },
          success: function (resp) {
            let result = resp;
            console.log(result.data.orderList)
            vm.orderList = result.data.orderList;
            vm.pages = [];
            for(let i = 2;i <= result.data.pages;i++){
              vm.pages.push(i);
            }
          }
        })
      },
      changePageOrderList: function (page=1){
        vm.currentPage = page;
        vm.fuzzyQueryOrderListList();
        $(".pageNumber").each(function (){
          if(page == $(this).attr("data-value")){
            $(this).addClass("active").siblings().removeClass("active")
          }
        });
      },
    },
    mounted: function () {
      this.fuzzyQueryOrderListList();

    }
  })


</script>
</body>
</html>